<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>电商大数据管理平台</title>
		<link rel="icon" href="icon.ico">
		<link href="plugins/bootstrap/css/bootstrap.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="plugins/element-ui/theme-default/index.css" />
		<link href="css/dashboard.css" rel="stylesheet">
		<!--[if lt IE 9]>
			<script src="plugins/html5shiv/html5shiv.min.js"></script>
	    <script src="plugins/respond/respond.min.js"></script>
    <![endif]-->
	</head>

	<body>
		<div id="app">
			<nav class="navbar navbar-default navbar-fixed-top">
				<div class="container-fluid">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
						<a class="navbar-brand" href="#" style="font-size: x-large;"><strong><b>电商大数据管理平台</b> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong></a>
					</div>

					<navbars :acv="bnav"></navbars>

				</div>
			</nav>

			<div class="container-fluid">
				<div class="row">
					<managenav :dsa="'物流'"></managenav>
					<div class="col-sm-9 col-sm-offset-3 col-md-offset-2 col-md-10 main">
						<h2 style="color: #0D81F5;"><b>物流管理</b></h2>
						<div class="panel-filter" style="border: 1px solid #ddd;">
							<form class="form-inline" role="form">
								<div class="form-group">
									<label for="name">网点名称：</label>
									<input type="text" class="form-control" id="name" placeholder="搜索网点名" v-model="searchParams.branchName">
								</div>
								&nbsp;&nbsp;
								<div class="form-group">
									<label for="address">地址：</label>
									<select name="address" id="address" class="form-control" v-model="searchParams.addressCode" @change="getData">
										<option value="">所有地区</option>
										<option v-for="add in addressData" v-bind:value="add.id">
									    {{ add.geoName }}
									  </option>
									</select>
								</div>
								&nbsp;&nbsp;
								<button type="button" class="btn btn-info" @click="getData">查询</button>
							</form>
						</div>
						<div style="margin: 10px 0;position: relative;">
							<el-table :data="tableData" stripe border style="width: 100%" @sort-change="sortChange">
								<el-table-column prop="affiliationName" label="机构"></el-table-column>
								<el-table-column prop="branchName" label="网点名称"></el-table-column>
								<el-table-column prop="branchAddress" label="网点地址"></el-table-column>
								<el-table-column prop="deliveryArea" label="配送范围"></el-table-column>
								<el-table-column prop="principal" label="联系人" width="120" align="center"></el-table-column>
								<el-table-column prop="contact" label="联系方式"></el-table-column>
								<el-table-column prop="staffs" label="员工数(人)" sortable align="center"></el-table-column>
								<el-table-column prop="staffs" label="车辆数(辆)" align="center"></el-table-column>
								<el-table-column prop="monthOutAmount" label="月发出量(件)" align="center"></el-table-column>
								<el-table-column prop="monthInAmount" label="月发入量(件)" align="center"></el-table-column>
								<el-table-column prop="tradeStatisticsTime" label="统计日期" sortable ></el-table-column>
								<!--<el-table-column label="交易情况" type="expand">
									<template scope="props">
										<el-table :data="props.row.tradeList" style="width: 100%">
											<el-table-column prop="time" label="日期">
											</el-table-column>
											<el-table-column prop="outNum" label="月发出量（件）">
											</el-table-column>
											<el-table-column prop="inNum" label="月发入量（件）">
											</el-table-column>
										</el-table>
									</template>-->
								</el-table-column>
							</el-table>
							<div class="text-center" style="margin: 10px 0;">
								<el-pagination @current-change="handleCurrentChange" :current-page="searchParams.index" :page-size="searchParams.size" layout="total, prev, pager, next, jumper" :total="totalCount">
								</el-pagination>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="js/ie10-viewport-bug-workaround.js"></script>
		<script src="plugins/jquery/jquery.min.js"></script>
		<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
		<script src="js/vue.min.js"></script>
		<script src="plugins/element-ui/index.js"></script>
		<script src="js/nav.js"></script>
		<script src="js/common.js"></script>
		<script>
			new Vue({
				el: "#app",
				data: {
					totalCount: 0,
					searchParams: {
						index: "1",
						size: "10",
						addressCode: "",
						branchName: "",
						staffsOrder: "",
						statisticsTimeOrder: ""
					},
					bnav: {
						number: 1,
					},
					addressData: [],
					tableData: [],
				},
				computed: {

				},
				mounted: function() {
					this.getAddressData();
					this.getData();
				},
				methods: {
					getAddressData:function() {
						var vm = this;
						$.ajax({
							type:"get",
							url:"ebb/geo/?addressCode=520600000000",
                            dataType: "json",
							async:true,
							success: function(data) {
								vm.addressData = data;
							},
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                if(XMLHttpRequest.status==401){
                                    //跳转到登录页,带上登录后的跳转地址redirect_uri=???
                                    // redirect_login();

                                    ShowTip("请先登录！", "success", 1000);
                                    setTimeout(function () {
                                        window.location.href = "login.html"
                                    }, 1000);
                                }
                            }
						});
					},
					getData:function() {
						var vm = this;
						$.ajax({
							type: "get",
							url: "ebb/front/logistics/"+
							"?start="+vm.searchParams.index+
							"&size="+vm.searchParams.size+
							"&addressCode="+vm.searchParams.addressCode+
							"&branchName="+vm.searchParams.branchName+
							"&staffsOrder="+vm.searchParams.staffsOrder+
							"&statisticsTimeOrder="+vm.searchParams.statisticsTimeOrder,
							async: true,
                            dataType: "json",
							success: function(data) {
								vm.totalCount = data.totalCount;
								vm.tableData = data.data;
							},
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                if(XMLHttpRequest.status==401){
                                    //跳转到登录页,带上登录后的跳转地址redirect_uri=???
                                    // redirect_login();

                                    ShowTip("请先登录！", "success", 1000);
                                    setTimeout(function () {
                                        window.location.href = "login.html"
                                    }, 1000);
                                }
                            }
						});
					},
					handleCurrentChange:function(val) {
						this.searchParams.index = val;
						this.getData();
					},
					sortChange:function(column) {
						if(column.prop === "staffs") {
							this.searchParams.staffsOrder = (this.searchParams.staffsOrder === "asc") ? "desc" : "asc";
						}else if(column.prop === "statisticsTimeOrder") {
							this.searchParams.statisticsTimeOrder = (this.searchParams.statisticsTimeOrder === "0") ? "desc" : "asc";
						}
						this.getData();
					}
				}
			});
		</script>
	</body>

</html>